<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <input type="button" value="播放" id="btn1">
    <input type="button" value="暂停" id="btn2">
    <video src="" id="v1" style="display:none"></video>
    <canvas id="c1" width="800" height="600"></canvas>
</body>
<script>
    let oV = document.getElementById('v1')
    let oC = document.getElementById('c1')
    let oBtn1 = document.getElementById('btn1')
    let oBtn2 = document.getElementById('btn2')
    let gd = oC.getContext('2d')
    /*setInterval(function(){
        gd.drawImage(oV,0,0)
    },1)*/
    //向浏览器请求一帧
    function next() {
        requestAnimationFrame(function () {
            //画
            gd.drawImage(oV,0,0)
            //取
            let imgData=gd.getImageData(0,0,oC.width,oC.height);
            for(let r=0;r<oC.height;r++){
                for(let c=0;c<oC.width;c++){
                    let color=(imgData.data[(r*oc.width+c)*4]+imgData.data[(r*oc.width+c)*4+1]+imgData.data[(r*oc.width+c)*4+2])/3;
                    imgData.data[(r*oc.width+c)*4]=imgData.data[(r*oc.width+c)*4+1]=imgData.data[(r*oc.width+c)*4+2]=color;
                }
            }
            gd.putImageData(imgData,0,0);
            next()
        })
    }
    next()
    oBtn1.onclick = function () {
        oV.play()
    }
    oBtn2.onclick = function () {
        oV.pause()
    }
</script>

</html>